<template>
  <div class="h-full max-w-4xl mx-auto overflow-y-auto">
    <div class="bg-white rounded-lg shadow-lg p-6">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-900">项目记录管理</h2>
        <div class="flex space-x-2">
          <button 
            @click="refreshStats"
            class="px-4 py-2 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
          >
            刷新统计
          </button>
          <button 
            @click="clearAllCache"
            class="px-4 py-2 text-sm bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
          >
            清空所有记录
          </button>
          <button 
            @click="$emit('navigate', 'home')"
            class="px-4 py-2 text-sm bg-gray-500 hover:bg-gray-600 text-white rounded-lg transition-colors"
          >
            返回首页
          </button>
        </div>
      </div>

      <!-- 缓存统计 -->
      <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="bg-blue-50 p-4 rounded-lg">
          <div class="text-2xl font-bold text-blue-600">{{ stats.total }}</div>
          <div class="text-sm text-blue-600">总项目记录</div>
        </div>
        <div class="bg-green-50 p-4 rounded-lg">
          <div class="text-2xl font-bold text-green-600">{{ stats.valid }}</div>
          <div class="text-sm text-green-600">有效记录</div>
        </div>
        <div class="bg-yellow-50 p-4 rounded-lg">
          <div class="text-2xl font-bold text-yellow-600">{{ stats.expired }}</div>
          <div class="text-sm text-yellow-600">过期记录</div>
        </div>
      </div>

      <!-- 缓存列表 -->
      <div class="space-y-3">
        <h4 class="text-md font-medium text-gray-700">项目记录列表</h4>
        <div class="max-h-96 overflow-y-auto space-y-2">
          <div
            v-for="entry in cacheEntries"
            :key="entry.id"
            class="border border-gray-200 rounded-lg p-3 hover:bg-gray-50 transition-colors"
          >
            <div class="flex items-center justify-between">
              <div class="flex-1">
                <div class="font-medium text-gray-900 truncate">{{ entry.path }}</div>
                <div class="text-sm text-gray-500 space-x-2">
                  <span>文件: {{ entry.totalFiles }}</span>
                  <span>重复组: {{ entry.duplicateGroups }}</span>
                  <span>可节省: {{ entry.savedSpace }}</span>
                </div>
                <div class="text-xs text-gray-400 mt-1">
                  {{ formatDate(entry.timestamp) }} | 
                  模式: {{ entry.scanMode }} | 
                  检测: {{ entry.detectionMode }}
                </div>
              </div>
              <div class="flex space-x-2">
                <button
                  @click="loadCache(entry)"
                  class="px-3 py-1.5 text-sm bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
                >
                  加载
                </button>
                <button
                  @click="goToScan(entry)"
                  class="px-3 py-1.5 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                >
                  前往扫描
                </button>
                <button
                  @click="deleteCache(entry)"
                  class="px-3 py-1.5 text-sm bg-red-500 text-white rounded-lg hover:bg-red-500 transition-colors"
                >
                  删除
                </button>
              </div>
            </div>
          </div>
          
          <div v-if="cacheEntries.length === 0" class="text-center text-gray-500 py-8">
            暂无项目记录
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { cacheManager, type CacheEntry } from '../utils/cache'

const stats = ref({ total: 0, valid: 0, expired: 0 })
const cacheEntries = ref<CacheEntry[]>([])

const refreshStats = () => {
  stats.value = cacheManager.getStats()
  cacheEntries.value = cacheManager.getEntries()
}

const clearAllCache = () => {
  if (confirm('确定要清空所有缓存吗？此操作不可恢复。')) {
    cacheManager.clear()
    refreshStats()
  }
}

const loadCache = (entry: CacheEntry) => {
  // 触发父组件加载缓存
  emit('load-cache', entry)
}

const goToScan = (entry: CacheEntry) => {
  // 触发父组件跳转到扫描配置页面
  emit('go-to-scan', entry)
}

const deleteCache = (entry: CacheEntry) => {
  if (confirm(`确定要删除缓存 "${entry.path}" 吗？`)) {
    cacheManager.delete(
      entry.path,
      entry.scanMode,
      entry.detectionMode,
      entry.similarityThreshold,
      entry.minFileSize,
      entry.maxFileSize
    )
    refreshStats()
  }
}

const formatDate = (timestamp: number) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  refreshStats()
})

const emit = defineEmits<{
  'load-cache': [entry: CacheEntry]
  'go-to-scan': [entry: CacheEntry]
  'navigate': [view: string]
}>()
</script>
